<template>
 <ul class="footer">
 <li @click="toIndex">
 <i class="fa fa-home"></i>
 <p>首页</p>
 </li>
 <li>
 <i class="fa fa-compass"></i>
 <p>发现</p>
 </li>
 <li @click="toOrderList">
 <i class="fa fa-file-text-o"></i>
 <p>订单</p>
 </li>
 <li @click="handleMyAccount">
 <i class="fa fa-user-o"></i>
 <p>我的</p>
 </li>
 </ul>
 </template>
 <script>
 export default{
 name:'Footer',
 methods:{
 toIndex(){
 this.$router.push({path:'/index'});
 },
 toOrderList(){
 this.$router.push({path:'/orderList'});
 },
 handleMyAccount() {
   // 检查用户是否已登录
   const user = this.$getSessionStorage('user');
   if (user) {
     // 显示登出确认
     if (confirm('是否要退出登录?')) {
       this.logout();
     }
   } else {
     // 如果未登录，跳转到登录页面
     this.$router.push({path:'/login'});
   }
 },
 logout() {
   // 清除用户信息和token
   this.$removeSessionStorage('user');
   this.$removeSessionStorage('token');
   
   // 提示用户已登出
   alert('已成功退出登录');
   
   // 跳转到首页
   this.$router.push({path:'/index'});
 }
 }
 }
 </script>
 <style>
 .wrapper .footer {
 width: 100%;
 height: 14vw;
 border-top: solid 1px #DDD;
 background-color: #fff;
 position: fixed;
 left: 0;
 bottom: 0;
display: flex;
 justify-content: space-around;
 align-items: center;
 }
 .wrapper .footer li {
 /*li本身的尺寸完全由内容撑起*/
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: #999;
 user-select: none;
 cursor: pointer;
 }
 .wrapper .footer li p {
 font-size: 2.8vw;
 }
 .wrapper .footer li i {
 font-size: 5vw;
 }
 </style>